
<template>
  <div class="home">
    <div class="homeLeft f1">
      <div class="pdf">
          <p title="下载简历文件" class="download"><a :href="laoclUrl" target="downloadFile"><i class="el-icon-download"></i></a></p>
        <div v-for="i in numPages" :key="i">
          <pdf :src="laoclUrl" :page="i" class="f1"></pdf>
        </div>
      </div>
    </div>
    <HomeRigth />
  </div>
</template>

<script>
import pdf from "vue-pdf";
import Api from "@/api/api";
import HomeRigth from "@common/front/homeRight";
export default {
  name: "index",
  props: {
    // 当前pdf的路径
    pdfUrl: {
      type: String,
      default: Api.API_HEADER+"/uploads/file/resume.pdf",
    },
  },
  components: {
    pdf,
    HomeRigth,
  },
  data() {
    return {
      // 当前页数
      numPages: 2,
      // 预览路径
      laoclUrl: "",
    };
  },
  watch: {},
  computed: {},
  created() {
    this.laoclUrl = this.pdfUrl;
  },
  mounted() {
    this.getNumPages();
  },
  methods: {
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.laoclUrl);
      // 网上查询 都没有加promise执行的整页渲染 emmmm... 不知道他们怎么运行的
      loadingTask.promise
        .then((pdf) => {
          this.laoclUrl = loadingTask;
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  margin-top: 50px;
  padding: 0 10%;
  display: flex;
      justify-content: space-evenly;

}
.homeLeft {
  width: calc(100% - 580px);
  background-color: #fff;
  padding: 20px 60px;
  .download{
    // float: right;
    width: 30px;
    height: 40px;
    border: 1px solid #000;
    font-size: 30px;
    background-color: #333;
    color: #999;
    position:relative;
    left:100%;
    top: 42px;
    a{
      color: #999;
    }
  }
  .download:hover{
     cursor: pointer;
  }
}
.pdf {
  margin: auto;
  width: 100%;
  padding: 20px 0;
}
</style>